<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        color: green;
      }
    </style>
  </head>
  <body>
    <!-- 1. 定义根标签 
     未来react创建的元素会插入到这个根标签中,从而渲染出来 
    -->
    <div id="root"></div>

    <!-- 2. 引入react.js和react-dom.js 
     注意: 
     1. 要先引入react,后引入react-dom. 因为react-dom依赖react
     2. react.js引入之后,得到了一个全局对象叫做React
     3. react-dom.js引入之后,得到了一个全局对象叫做ReactDOM
    -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>

    <!-- 3. 根据react提供的方法创建虚拟dom -->
    <script type="text/babel">
      const div = (
        <div>
          <div
            onClick={function (e) {
              // 注意: react中事件处理函数接收到的对象是合成对象
              // 合成对象是对dom中事件对象的包装,解决了事件对象的兼容性问题
              // 合成事件使用时和事件对象一样
              // console.log('div被点击了', e.target)

              console.log(this) // 注意: react中事件处理函数中的this,指向undefined,不指向事件源
              // 为什么this指向undefined?
              // 原因: 1. 我们写的函数不是真正的事件处理函数,在react-dom.js中是被apply调用的.并且apply调用的第一个参数是undefined.所以此时this应该指向window.2. 又由于代码被babel编译,所以开启了严格模式,严格模式下,this不能指向window,最终指向了undefined
            }}
            // onMouseEnter={function () {
            //   console.log('鼠标移入到div中了')
            // }}
          >
            hello react
          </div>

          <a
            href="http://www.atguigu.com"
            onClick={function (e) {
              // e.preventDefault()
              console.log(123)
              // return false
            }}
          >
            xxx
          </a>
        </div>
      )

      // 4. 根据虚拟dom创建真实dom,并插入到root中渲染页面
      ReactDOM.createRoot(document.getElementById('root')).render(div)
    </script>
  </body>
</html>
